<!DOCTYPE html>
<html>
<head>
<style> 
.div1,.div2,.div3{
margin:30px;
width:200px;
height:100px;
background:#ccc url(http://www.keyin.cn/2013_skin/logo_index.gif) no-repeat center center;
-webkit-transform:rotate(10deg); 
-webkit-transform-origin: 100px 0px ;
-webkit-animation: myfirst 5s infinite;/*引用动画*/
}

.div2{
-webkit-transform-origin: 100px -100px ;
}

.div3{
-webkit-transform-origin: 100px -200px ;
}
/*防止兼容问题*/
@-webkit-keyframes myfirst{
0%   {-webkit-transform:rotate(10deg);}
25%  {-webkit-transform:rotate(-10deg);}
50%  {-webkit-transform:rotate(10deg);}
75%  {-webkit-transform:rotate(-10deg);}
100% {-webkit-transform:rotate(10deg);}
}
/*申明一个动画名字*/
@keyframes myfirst{
0%   {-webkit-transform:rotate(10deg);}
25%  {-webkit-transform:rotate(-10deg);}
50%  {-webkit-transform:rotate(10deg);}
75%  {-webkit-transform:rotate(-10deg);}
100% {-webkit-transform:rotate(10deg);}
}
</style>
</head>
<body>

<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
</body>
</html>
